<template>
  <div class="wrapper">
    <div class="bottommargin"></div>
    <ul class="pagebottom">
      <li @click="toIndex">
        <i class="fa fa-home"></i>
        <p>首页</p>
      </li>
      <li @click="toFind">
        <i class="fa fa-compass"></i>
        <p>发现</p>
      </li>
      <li @click="toOrderList">
        <i class="fa fa-file-text-o"></i>
        <p>订单</p>
      </li>
      <li @click="toUser">
        <i class="fa fa-user-o"></i>
        <p>我的</p>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: "Footer",
  methods: {
    toIndex() {
      this.$router.push({ path: '/index' });
    },
    toFind() {
      this.$router.push({ path: '/error403' });
    },
    toOrderList() {
      this.$router.push({ path: '/orderList' });
    },
    toUser() {
      // let user = this.$getSessionStorage("user");
      // if (user == null)
      //   this.$router.push({ path: '/login' });
      // else
      this.$router.push({ path: '/user' });
    },
  }
}
</script>

<style scoped>
.wrapper .bottommargin {
  width: 100%;
  height: 14vw;
}

.wrapper .pagebottom {
  width: 100%;
  height: 14vw;
  border-top: solid 1px #DDD;
  background-color: #fff;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-around;
  align-items: center;
}

.wrapper .pagebottom li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: #999;
  user-select: none;
  cursor: pointer;
}

.wrapper .pagebottom li p {
  font-size: 2.8vw;
}

.wrapper .pagebottom li i {
  font-size: 5.5vw;
}
</style>